import {useState} from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import {createMachine} from 'xstate';
import {useMachine} from '@xstate/react';
import {bill_card_machine} from "./bill_card_machine.js";
import {bill_type_machine} from "./bill_type_machine.js";
import {TypeGraph} from "./bill-graph/TypeGraph.jsx";

const CardComponent = () => {
  // 使用卡片1的状态机
  const [cardState, cardService] = useMachine(bill_card_machine);

  return (
    <div>
      <p>{cardState.matches('up.closed') && 'up.closed'}</p>
      <p>{cardState.matches('up.opened') && 'up.opened'}</p>
      <p>{cardState.matches('down.closed') && 'down.closed'}</p>
      <p>{JSON.stringify(cardState.value)}</p>
      <p>{cardState.value.up}</p>
      <p>{cardState.value.down}</p>
      <div>
        <button onClick={() => cardService({ type: "open_up" })}>open_up</button>
        <button onClick={() => cardService({ type: "close_up" })}>close_up</button>
      </div>
    </div>
  );
};

const BillTypeComponent = () => {
  const [billTypeState, billTypeService] = useMachine(bill_type_machine);

  return (
    <div style={{border: '1px solid red'}}>
      <p>bill type card</p>
      <p>{JSON.stringify(billTypeState.value)}</p>
      <div>
        <button onClick={() => billTypeService({ type: "展开" })}>展开</button>
        <button onClick={() => billTypeService({ type: "收起" })}>收起</button>
      </div>
    </div>
  )
}

const X = () => {
  const [state, send] = useMachine(cardMachine);

  return (
    <div>
      {/** 你可以监听 service 处于什么状态 */}
      {state.matches('pending') && <p>Loading...</p>}
      {state.matches('rejected') && <p>Promise Rejected</p>}
      {state.matches('resolved') && <p>Promise Resolved</p>}
      <div>
        {/** 你可以发送事件到运行的 service 中 */}
        <button onClick={() => send({ type: "RESOLVE" })}>Resolve</button>
        <button onClick={() => send({ type: "REJECT" })}>Reject</button>
      </div>
    </div>
  );
};

function App() {
  return (
    <>
      <TypeGraph />
      <CardComponent />
      <hr/>
      <BillTypeComponent />
    </>
  )
}

export default App
